<template>
	<view>
		<image
			src="https://lf-cdn-tos.bytescm.com/obj/static/toutiao/ep/official_web/static/media/solution3.038627e1.png"
			mode="widthFix" style="width: 100%;height: 150px;"></image>
		<view v-if="!token" class="tip-box">
			<text>您尚未登入,点我</text>
			<text @click="goLogin()" class="color-btn">登录</text>
		</view>
		<view v-else class="tip-box">
			<text class="color-btn">{{token}}用户</text>
			<text>欢迎您</text>
		</view>
		
		<uni-title title1="VIP" title2="资源下载" text1="VIP学员可获取对应课程的视频源码"></uni-title>
		<view class="public-box">
			<view @click="goCourse(i.url,i.text)" v-for="(i,index) in publicList" class="public-list" :key="index">
				<image :src="i.image" mode=""></image>
				<text>{{i.text}}</text>
			</view>
		</view>
		<uni-title title1="配套" title2="资源下载" text1="VIP学员可获取的配套学习资料"></uni-title>
		<view class="public-box">
			<view @click="goCourse(i.url,i.text)" v-for="(i,index) in publicList" class="public-list" :key="index">
				<image :src="i.image" mode=""></image>
				<text>{{i.text}}</text>
			</view>
		</view>
		<uni-title title1="视频课" title2="资源下载" text1="独立的小额视频课资源"></uni-title>
		<view class="public-box">
			<view @click="goCourse(i.url,i.text)" v-for="(i,index) in publicList" class="public-list" :key="index">
				<image :src="i.image" mode=""></image>
				<text>{{i.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				publicList: [],
				token: ''
			}
		},
		onLoad() {
			let _this = this
			uni.getStorage({
				// console.log('###',this)
				key: 'token',
				success: function(res) {
					// console.log('有token值', res.data);
					_this.token = res.data
				},
			})
			// 个人中心(请求)-复用的是
			uni.request({
				url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/public', //仅为示例，并非真实接口地址。
				success: (res) => {
					this.publicList = res.data.data
					// this.text = 'request success';
				}
			});
		},
		methods: {
			goCourse(url,title) {
				let _this = this
				if (this.token) {
					// 保留当前页面，跳转到应用内的某个页面
					uni.navigateTo({
						url: `/pages/publicView/publicView?url=${url}&title=${title}`
					});
				}else{
					uni.showModal({
						title: '提示',
						content: 'VIP资源需要登入查看',
						success: function(res) {
							if (res.confirm) {
								_this.goLogin()
								console.log('用户点击确定');
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style scoped>
	.public-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
	}

	/* text-align使文字居中 */
	.public-list {
		width: 48%;
		height: 120px;
		margin-bottom: 40px;
		text-align: center;
	}

	.public-list image {
		width: 100%;
		height: 120px;
		margin-bottom: 5px;
	}

	.public-list text {
		font-size: 12px;
		color: #999;
	}

	.tip-box {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 5px;
	}

	.tip-box .color-btn {
		color: #eb7c06;
	}
</style>
